<template>
  <div class="login-bg clearfix bsb">
    <el-form :model="form"
             :rules="rules2"
             ref="form"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-container">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="account">
        <el-input type="text"
                  v-model="form.account"
                  auto-complete="off"
                  placeholder="帐号"
                  @keyup.enter.native="Login('form')"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password"
                  v-model="form.checkPass"
                  auto-complete="off"
                  placeholder="密码"
                  @keyup.enter.native="Login('form')"></el-input>
      </el-form-item>
      <el-form-item prop="code"
                    v-show="loginErrorCount > 2">
        <el-row type="flex"
                justify="space-between">
          <el-col :span="16">
            <el-input v-model="form.code"
                      auto-complete="off"
                      placeholder="验证码"
                      @keyup.enter.native="Login('form')"></el-input>
          </el-col>
          <el-col :span="7"
                  class="code cur">
            <img :src="codeImg"
                 srcset
                 @click="getCode">
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary"
                   style="width:100%;"
                   @click="Login('form')"
                   :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import config from '@/config/config'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'Login',
  computed: {
    ...mapGetters(['loginErrorCount', 'loginUserName'])
  },
  data() {
    return {
      logining: false,
      form: {
        remember: true,
        // account: util.getStore("name"),
        account: '',
        // checkPass: util.getStore("pass")
        checkPass: '',
        code: ''
      },
      rules2: {
        account: [
          { required: true, message: '请输入帐号', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '帐号长度为6-20位',
            trigger: 'blur'
          }
        ],
        checkPass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            min: 6,
            max: 20,
            message: '密码长度为6-20位',
            trigger: 'blur'
          }
        ],
        code: [
          {
            // required: true,
            message: '请输入验证码',
            trigger: 'blur'
          },
          {
            min: 4,
            max: 4,
            message: '必须4个字符',
            trigger: 'blur'
          }
        ]
      },
      codeImg: '', //验证码
      codeNum: '' //验证码
    }
  },
  created() {
    this.loginErrorCount > 2 && this.getCode()
    this.form.account = this.loginUserName
  },
  methods: {
    ...mapMutations(['setUserInfo', 'setLoginErrorCount', 'setLoginUserName']),
    //登录
    Login(a) {
      const _this = this
      this.$refs[a].validate(valid => {
        if (!valid) return
        if (
          this.loginErrorCount <= 2 ||
          this.form.code.toLowerCase() === this.codeNum.toLowerCase()
        ) {
          this.http
            .$post('admin2/user.api/login', {
              // this.http.$post('user/api/login', {
              //   is_admin: 1,
              password: this.form.checkPass,
              username: this.form.account
            })
            .then(res => {
              if (this.form.remember) {
                this.setLoginUserName(this.form.account)
              } else {
              }
              this.setLoginErrorCount(0)
              this.setUserInfo(res)
              //跳转页面
              this.$message.success('登录成功！')
              let rPath
              if (res.rule_list[0].children) {
                rPath = res.rule_list[0].children[0].path
              } else {
                rPath = res.rule_list[0].path
              }
              setTimeout(() => {
                this.$router.replace({
                  path: rPath
                })
              }, 1000)
            })
            .catch(err => {
              err.code && this.setLoginErrorCount(this.loginErrorCount + 1)
              this.$err(err)
              this.loginErrorCount > 2 && this.getCode()
            })
        } else {
          this.$message.error('验证码不正确')
          this.getCode()
        }
      })
    },
    //获取刷新验证码
    getCode() {
      this.http
        .$post('opening/api/get_codes')
        .then(res => {
          this.codeImg = config.api_url + res.codeurl
          this.codeNum = res.codes
        })
        .catch(this.$err)
    }
  }
}
</script>

<style lang="less" scoped>
.login-bg {
  padding-bottom: 100px;
  min-height: 100vh;
  background-color: #354052;
}

.login-container {
  /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  background-clip: padding-box;
  margin: 180px auto 0;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
}

.txt {
  /*
    .color(#333, @colour);
    */
  color: #333;
}

.code {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 40px;
  img {
    background-size: cover;
    width: 100%;
    height: 100%;
  }
}
</style>